

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>React v0.13 RC2 - React Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="React v0.13 RC2 - React Blog">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="Thanks to everybody who has already been testing the release candidate. We&#39;ve received some good feedback and as a result we&#39;re going to do a second release candidate. The changes are minimal. We haven&#39;t changed the behavior of any APIs we exposed in the previous release candidate. Here&#39;s a summary of the changes:
">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/react/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="//cdn.bootcss.com/docsearch.js/1.3.0/docsearch.min.css" />
  <link rel="stylesheet" href="/react/css/syntax.css">
  <link rel="stylesheet" href="/react/css/codemirror.css">
  <link rel="stylesheet" href="/react/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
  <![endif]-->

  <script src="//cdn.bootcss.com/docsearch.js/1.5.0/docsearch.min.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/codemirror.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/javascript/javascript.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/xml/xml.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/jsx/jsx.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react.min.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
  <script src="//cdn.bootcss.com/babel-standalone/6.15.0/babel.min.js"></script>

  <script src="/react/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/react/">
      <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/react/docs/hello-world.html">Docs</a></li>
        <li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/react/community/support.html">Community</a></li>
        <li><a href="/react/blog/" class="active">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v15.5.4</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap blogContent">

  <div class="inner-content">
    

<h1>

  React v0.13 RC2

</h1>

<p class="meta">
  March  3, 2015
  by
  
    
      <a href="https://twitter.com/sebmarkbage">Sebastian Markbåge</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Thanks to everybody who has already been testing the release candidate. We&#39;ve received some good feedback and as a result we&#39;re going to do a second release candidate. The changes are minimal. We haven&#39;t changed the behavior of any APIs we exposed in the previous release candidate. Here&#39;s a summary of the changes:</p>

<ul>
<li>Introduced a new API (<code>React.cloneElement</code>, see below for details).</li>
<li>Fixed a bug related to validating <code>propTypes</code> when using the new <code>React.addons.createFragment</code> API.</li>
<li>Improved a couple warning messages.</li>
<li>Upgraded jstransform and esprima.</li>
</ul>

<p>The release candidate is available for download:</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.13.0-rc2.js">https://fb.me/react-0.13.0-rc2.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.13.0-rc2.min.js">https://fb.me/react-0.13.0-rc2.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.0-rc2.js">https://fb.me/react-with-addons-0.13.0-rc2.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.0-rc2.min.js">https://fb.me/react-with-addons-0.13.0-rc2.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.13.0-rc2.js">https://fb.me/JSXTransformer-0.13.0-rc2.js</a></li>
</ul>

<p>We&#39;ve also published version <code>0.13.0-rc2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>

<hr>

<h2>React.cloneElement</h2>

<p>In React v0.13 RC2 we will introduce a new API, similar to <code>React.addons.cloneWithProps</code>, with this signature:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">cloneElement</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">props</span><span class="p">,</span> <span class="p">...</span><span class="nx">children</span><span class="p">);</span>
</code></pre></div>
<p>Unlike <code>cloneWithProps</code>, this new function does not have any magic built-in behavior for merging <code>style</code> and <code>className</code> for the same reason we don&#39;t have that feature from <code>transferPropsTo</code>. Nobody is sure what exactly the complete list of magic things are, which makes it difficult to reason about the code and difficult to reuse when <code>style</code> has a different signature (e.g. in the upcoming React Native).</p>

<p><code>React.cloneElement</code> is <em>almost</em> equivalent to:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o">&lt;</span><span class="nx">element</span><span class="p">.</span><span class="nx">type</span> <span class="p">{...</span><span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">children</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/element.type&gt;</span>
</code></pre></div>
<p>However, unlike JSX and <code>cloneWithProps</code>, it also preserves <code>ref</code>s. This means that if you get a child with a <code>ref</code> on it, you won&#39;t accidentally steal it from your ancestor. You will get the same <code>ref</code> attached to your new element.</p>

<p>One common pattern is to map over your children and add a new prop. There were many issues reported about <code>cloneWithProps</code> losing the ref, making it harder to reason about your code. Now following the same pattern with <code>cloneElement</code> will work as expected. For example:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newChildren</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">child</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">cloneElement</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span>
<span class="p">});</span>
</code></pre></div>
<blockquote>
<p>Note: <code>React.cloneElement(child, { ref: &#39;newRef&#39; })</code> <em>DOES</em> override the <code>ref</code> so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs.</p>
</blockquote>

<p>This was a critical feature to get into React 0.13 since props are now immutable. The upgrade path is often to clone the element, but by doing so you might lose the <code>ref</code>. Therefore, we needed a nicer upgrade path here. As we were upgrading callsites at Facebook we realized that we needed this method. We got the same feedback from the community. Therefore we decided to make another RC before the final release to make sure we get this in.</p>

<p>We plan to eventually deprecate <code>React.addons.cloneWithProps</code>. We&#39;re not doing it yet, but this is a good opportunity to start thinking about your own uses and consider using <code>React.cloneElement</code> instead. We&#39;ll be sure to ship a release with deprecation notices before we actually remove it so no immediate action is necessary.</p>

</div>


  <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>


  </div>
  <div class="nav-docs nav-blog">
  <div class="nav-docs-section">
    <h3>Recent posts</h3>
    <ul>
      
        <li><a href="/react/blog/2017/04/07/react-v15.5.0.html">React v15.5.0</a></li>
      
        <li><a href="/react/blog/2016/11/16/react-v15.4.0.html">React v15.4.0</a></li>
      
        <li><a href="/react/blog/2016/09/28/our-first-50000-stars.html">Our First 50,000 Stars</a></li>
      
        <li><a href="/react/blog/2016/08/05/relay-state-of-the-state.html">Relay: State of the State</a></li>
      
        <li><a href="/react/blog/2016/07/22/create-apps-with-no-configuration.html">Create Apps with No Configuration</a></li>
      
        <li><a href="/react/blog/2016/07/13/mixins-considered-harmful.html">Mixins Considered Harmful</a></li>
      
        <li><a href="/react/blog/2016/07/11/introducing-reacts-error-code-system.html">Introducing React's Error Code System</a></li>
      
        <li><a href="/react/blog/2016/04/08/react-v15.0.1.html">React v15.0.1</a></li>
      
        <li><a href="/react/blog/2016/04/07/react-v15.html">React v15.0</a></li>
      
        <li><a href="/react/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a></li>
      
      <li><a href="/react/blog/all.html">All posts ...</a></li>
    </ul>
  </div>
</div>

</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/react/" class="nav-home">
    </a>
    <div>
      <h5><a href="/react/docs/">Docs</a></h5>
      <a href="/react/docs/hello-world.html">Quick Start</a>
      <a href="/react/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/react/tutorial/tutorial.html">Tutorial</a>
      <a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Resources</a></h5>
      <a href="/react/community/conferences.html">Conferences</a>
      <a href="/react/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/react/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/react/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/react/js/anchor-links.js"></script>
  <script>
    

    

    
    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
